// 按钮尺寸，在确定常用值之后可以将常用值作为默认值
@mixin button-size($height, $padding, $font-size, $border-radius) {
  height: $height;
  padding: $padding;
  font-size: $font-size;
  border-radius: $border-radius;
}

// 按钮颜色
@mixin button-color($color, $background, $border) {
  color: $color;
  background-color: $background;
  border-color: $border;

  // 当 button 中包含 a 标签时 （仅作用于 chrome 浏览器）
  >a:only-child {
    color: transparent;

    &:after {
      content: '';
      // a 标签的可点击热区填充整个 button 按钮
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: transparent;
    }
  }
}

// 特殊按钮
@mixin button-variant($color, $background, $border) {
  @include button-color($color, $background, $border);

  &:hover,
  &:focus {
    @include button-color(tint($color, 20%), tint(), )
  }
}